<!--工序作业指导书管理-->
<!--用户权限说明-->
<!--管理员：代码：1:可以做所有的操作；
               2:可以添加作业指导书以及所有修改作业指导书的权限；
               3：只能编辑作业指导书，但是不能新加
               4：可以编辑作业指导书，但是不能编辑关联控制计划
               5：只能编审批会签，但是不能修改
               5：只能查看，不能编辑-->
<template>
  <div style="margin: 0;padding: 0">
    <el-container>
      <!--页面表头设计-->
      <el-header style="height: 7vh">
        <el-link class="headMain" href="http://10.255.96.48:3404/">{{ main.qualityManagementSystem }}</el-link>
        <span class="center-text">{{ main.standardWorkGuidance }}</span>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <div style="margin-bottom: 10px">
            <el-card class="box-card">
              <div slot="header" class="clearfix" style="text-align: left">
                <span>{{ main.selectionPrompt }}</span>
              </div>
              <div style="text-align: left">
                <div style="color: red;font-size: 16px"><strong>{{ main.titleMianId }}</strong></div>
                <div style="color: red;font-size: 16px"><strong>{{ main.titleMianOp }}</strong></div>
              </div>
            </el-card>
          </div>
          <el-input
              :placeholder="main.enterKeywordsForFiltering"
              v-model="filterText"
              style="width: 160px">
          </el-input>
          <el-tree
              style="margin: 10px 8px;"
              :data="treeList"
              :props="defaultProps"
              default-expand-all
              @node-click="treeClick"
              :filter-node-method="filterNode"
              ref="tree"
              highlight-current></el-tree>
        </el-aside>
        <el-container>
          <!--主题设计-->
          <el-main style="overflow-y: auto;overflow-x: auto; height: 79vh">
            <div style="display: flex;height: 75vh;margin-top: 10px">
              <div style="flex-grow: 1;
                  border: 1px solid blue;
                  box-sizing: border-box;
                  margin-left: 8px;
                  padding: 8px;
                  display: flex;
                  width: 100%">
                <div style="flex: 1;height: 73vh;scroll-margin-right: 8px;overflow-x: auto;border: 1px solid #d3d3d3; /* 修改为浅灰色 */">
                  <div style="text-align: left; ;margin-top: 8px;margin-left: 10px">
                    <el-link
                        :style="{marginRight:'5px',backgroundColor:workBookHeard1 , color:workBookHeardColour1, padding: '4px 10px', borderRadius: '5px' }"
                        @click="workBookHeard(1)">{{ pageVal.instruction }}
                    </el-link>
                    <span>|</span>
                    <el-link
                        :style="{marginRight:'5px',backgroundColor:workBookHeard2 , color:workBookHeardColour2, padding: '4px 10px', borderRadius: '5px' }"
                        @click="workBookHeard(2)">{{ pageVal.partDetailsList }}
                    </el-link>
                    <span>|</span>
                    <el-link
                        :style="{marginRight:'5px',backgroundColor:workBookHeard3 , color:workBookHeardColour3, padding: '4px 10px', borderRadius: '5px' }"
                        @click="workBookHeard(3)">{{ pageVal.failureCase }}
                    </el-link>
                    <span>|</span>
                    <el-link
                        :style="{marginRight:'5px',backgroundColor:workBookHeard4 , color:workBookHeardColour4, padding: '4px 10px', borderRadius: '5px' }"
                        @click="workBookHeard(4)">{{ pageVal.manHour }}
                    </el-link>
                    <span>|</span>
                    <el-link
                        :style="{marginRight:'5px',backgroundColor:workBookHeard5 , color:workBookHeardColour5, padding: '4px 10px', borderRadius: '5px' }"
                        @click="workBookHeard(5)">现在工步
                    </el-link>
                  </div>
                  <!--                  <el-button  @click="workStepInspectionClick()">-->
                  <!--                    装配车间-郭-->
                  <!--                  </el-button>-->
                  <hr>
                  <div v-if="workBookHeardUse===1">
                    <el-table
                        :data="workBook"
                        border
                        style="width: 100%;margin-top: 5px"
                        height="66vh"
                        highlight-current-row
                        @expand-change="workBookRowClick">
                      <el-table-column
                          type="expand"
                          v-slot:default="props">
                        <div>
                          <div
                              style="margin-right: 10px;margin-left: 15px;margin-bottom:8px;border: 1px solid blue;padding: 5px">
                            <span>{{ pageVal.attentionPointsExplanation }}</span>
                            <span
                                v-if="languageS==='chinese' && props.row.problem.split('|*|').length===3" v-html="props.row.problem.split('|*|')[0]"></span>
                            <span
                                v-else-if="languageS==='english' && props.row.problem.split('|*|').length===3" v-html="props.row.problem.split('|*|')[1]"></span>
                            <span
                                v-else-if="languageS==='russian' && props.row.problem.split('|*|').length===3" v-html="props.row.problem.split('|*|')[2]"></span>
                            <span v-else>{{ props.row.problem }}</span>
                          </div>
                          <div
                              style="margin-right: 10px;margin-left: 15px;margin-bottom:8px;border: 1px solid blue;padding: 5px">
                            <span>{{ pageVal.qualityInspection }}</span>
                            <span
                                v-if="languageS==='chinese' && props.row.inspect.split('|*|').length===3" v-html="props.row.inspect.split('|*|')[0]"></span>
                            <span
                                v-else-if="languageS==='english' && props.row.inspect.split('|*|').length===3" v-html="props.row.inspect.split('|*|')[1]"></span>
                            <span
                                v-else-if="languageS==='russian' && props.row.inspect.split('|*|').length===3" v-html="props.row.inspect.split('|*|')[2]"></span>
                            <span v-else>{{ props.row.inspect }}</span>
                          </div>
                          <div
                              style="margin-right: 10px;margin-left: 15px;margin-bottom:8px;border: 1px solid blue;padding: 5px">
                            <div>{{ pageVal.controlPlanRequirements }}</div>
                            <hr>
                            <div style="width: 100%;" v-if="isControlPlanLoad">
                              <el-table
                                  :data="controlPlanData"
                                  style="width: 100%"
                                  size="mediut">
                                <el-table-column
                                    :label="pageVal.tolerance"
                                    width="250px"
                                    prop="specification"
                                    fixed
                                    v-slot:default="scope">
                                  <span v-if="languageS==='chinese'">{{ scope.row.specification }}</span>
                                  <span v-if="languageS==='english'">{{ scope.row.specificationEnglish }}</span>
                                  <span v-if="languageS==='russian'">{{ scope.row.specificationRussian }}</span>
                                </el-table-column>
                                <el-table-column
                                    :label="pageVal.evaluate"
                                    width="100px"
                                    prop="measure"
                                    v-slot:default="scope">
                                  <span v-if="languageS==='chinese'">{{ scope.row.measure }}</span>
                                  <span v-if="languageS==='english'">{{ scope.row.measureEnglish }}</span>
                                  <span v-if="languageS==='russian'">{{ scope.row.measureRussian }}</span>
                                </el-table-column>
                                <el-table-column
                                    :label="pageVal.capacity"
                                    width="100px"
                                    prop="capacity"
                                    v-slot:default="scope">
                                  <span v-if="languageS==='chinese'">{{ scope.row.capacity }}</span>
                                  <span v-if="languageS==='english'">{{ scope.row.capacityEnglish }}</span>
                                  <span v-if="languageS==='russian'">{{ scope.row.capacityRussian }}</span>
                                </el-table-column>
                                <el-table-column
                                    :label="pageVal.frequency"
                                    width="100px"
                                    prop="frequency"
                                    v-slot:default="scope">
                                  <span v-if="languageS==='chinese'">{{ scope.row.frequency }}</span>
                                  <span v-if="languageS==='english'">{{ scope.row.frequencyEnglish }}</span>
                                  <span v-if="languageS==='russian'">{{ scope.row.frequencyRussian }}</span>
                                </el-table-column>
                                <el-table-column
                                    :label="pageVal.controlMethod"
                                    width="100px"
                                    prop="method"></el-table-column>
                              </el-table>
                            </div>
                          </div>
                          <div
                              style="margin-right: 10px;margin-left: 15px;margin-bottom:8px;border: 1px solid blue;padding: 5px">
                            <span>{{ pageVal.tools }}</span>
                            <span
                                v-if="languageS==='chinese' && props.row.toll.split('|*|').length===3">{{ props.row.toll.split('|*|')[0] }}</span>
                            <span
                                v-else-if="languageS==='english' && props.row.toll.split('|*|').length===3">{{ props.row.toll.split('|*|')[1] }}</span>
                            <span
                                v-else-if="languageS==='russian' && props.row.toll.split('|*|').length===3">{{ props.row.toll.split('|*|')[2] }}</span>
                            <span v-else>{{ props.row.toll }}</span>
                          </div>
                          <div
                              style="margin-right: 10px;margin-left: 15px;margin-bottom:8px;border: 1px solid blue;padding: 5px">
                            <span>{{ pageVal.equipment }}</span>
                            <span
                                v-if="languageS==='chinese' && props.row.device.split('|*|').length===3">{{ props.row.device.split('|*|')[0] }}</span>
                            <span
                                v-else-if="languageS==='english' && props.row.device.split('|*|').length===3">{{ props.row.device.split('|*|')[1] }}</span>
                            <span
                                v-else-if="languageS==='russian' && props.row.device.split('|*|').length===3">{{ props.row.device.split('|*|')[2] }}</span>
                            <span v-else>{{ props.row.device }}</span>
                          </div>
                          <div
                              style="margin-right: 10px;margin-left: 15px;margin-bottom:8px;border: 1px solid blue;padding: 5px">
                            <span>{{ pageVal.accessories }}</span>
                            <span
                                v-if="languageS==='chinese' && props.row.accessories.split('|*|').length===3">{{ props.row.accessories.split('|*|')[0] }}</span>
                            <span
                                v-else-if="languageS==='english' && props.row.accessories.split('|*|').length===3">{{ props.row.accessories.split('|*|')[1] }}</span>
                            <span
                                v-else-if="languageS==='russian' && props.row.accessories.split('|*|').length===3">{{ props.row.accessories.split('|*|')[2] }}</span>
                            <span v-else>{{ props.row.accessories }}</span>
                          </div>
                          <div
                              style="margin-right: 10px;margin-left: 15px;margin-bottom:8px;border: 1px solid blue;padding: 5px">
                            <span style="margin-right: 30px">起始信号：{{ props.row.startSignal }}</span>
                            <span>结束信号：{{ props.row.endSignal }}</span>
                          </div>
                        </div>
                      </el-table-column>
                      <el-table-column
                          v-slot:default="scope"
                          :label="pageVal.order"
                          width="50"
                          align="center">
                        {{ scope.$index + 1 }}
                      </el-table-column>
                      <el-table-column
                          prop="work"
                          :label="pageVal.stepContent"
                          v-slot:default="scope">
                        <div @click="BookRowClick(scope)">
                          <span
                              v-if="languageS==='chinese' && scope.row.work.split('|*|').length===3">{{ scope.row.work.split('|*|')[0] }}</span>
                          <span
                              v-else-if="languageS==='english' && scope.row.work.split('|*|').length===3">{{ scope.row.work.split('|*|')[1] }}</span>
                          <span
                              v-else-if="languageS==='russian' && scope.row.work.split('|*|').length===3">{{ scope.row.work.split('|*|')[2] }}</span>
                          <span v-else>{{ scope.row.work }}</span>
                          <span>--{{ scope.row.spendTime }}S</span>
                          <el-progress :text-inside="true" :stroke-width="20" :percentage="scope.row.percentage"
                                       :status="scope.row.status"></el-progress>
                        </div>

                      </el-table-column>
                    </el-table>
                  </div>
                  <div v-if="workBookHeardUse===2">
                    <div style="text-align: right">
                      <el-link style="color: red" v-if="partsListData.length===0">{{ pageVal.add }}</el-link>
                    </div>
                    <el-table
                        :data="partsListData"
                        border
                        style="width: 100%;margin-top: 5px"
                        height="65vh"
                        highlight-current-row
                        @row-click="partsListClick">
                      <el-table-column
                          type="expand"
                          v-slot:default="props">
                        <div>
                          <div
                              style="margin-right: 10px;margin-left: 15px;margin-bottom:8px;border: 1px solid blue;padding: 5px">
                            <span>{{ pageVal.specialCharacteristics }}</span>
                            <span>{{ props.row.special }}</span>
                          </div>
                        </div>
                      </el-table-column>
                      <el-table-column
                          v-slot:default="scope"
                          :label="pageVal.diagramCode"
                          width="50">
                        {{ scope.row.mapId }}
                      </el-table-column>
                      <el-table-column
                          prop="stepNum"
                          width="50"
                          :label="pageVal.stepNumber">
                      </el-table-column>
                      <el-table-column
                          prop="partName"
                          :label="pageVal.partName"
                          width="120"
                          v-slot:default="scope">
                        <span v-if="scope.row.partName.split('|*|').length===3 && languageS==='chinese'">
                          {{ scope.row.partName.split('|*|')[0] }}
                        </span>
                        <span v-else-if="scope.row.partName.split('|*|').length===3 && languageS==='english'">
                          {{ scope.row.partName.split('|*|')[1] }}
                        </span>
                        <span v-else-if="scope.row.partName.split('|*|').length===3 && languageS==='russian'">
                          {{ scope.row.partName.split('|*|')[2] }}
                        </span>
                        <span v-else>
                          {{ scope.row.partName }}
                        </span>
                      </el-table-column>
                      <el-table-column
                          prop="partId"
                          :label="pageVal.partNumber">
                      </el-table-column>
                      <el-table-column
                          prop="partNum"
                          :label="pageVal.quantity"
                          width="50">
                      </el-table-column>
                    </el-table>
                  </div>
                  <div v-if="workBookHeardUse===3">
                    <div>
                      <el-table
                          :data="caseUseData"
                          border
                          style="width: 100%">
                        <el-table-column
                            prop="id"
                            :label="pageVal.order"
                            width="50"
                            v-slot:default="scope">
                          <span>{{scope.row.id+1}}</span>
                        </el-table-column>
                        <el-table-column
                            prop="caseUse"
                            :label="pageVal.caseDescription"
                            v-slot:default="scope">
                          <span>{{scope.row.caseUse}}</span>
                        </el-table-column>
                      </el-table>
                    </div>
                  </div>
                  <div v-else-if="workBookHeardUse===4" ref="myChartBor" style="height: 68vh;width:100%">
                  </div>
                  <div v-if="workBookHeardUse===5">
                    <div style="margin-left: 8px;margin-right: 8px">
                      <el-descriptions class="margin-top" title="站内步骤信息：" :column="3" size="mini" border>
                        <el-descriptions-item label="发动机号：">
                          {{ currentWorkStepShow.engineNumber }}
                        </el-descriptions-item>
                        <el-descriptions-item label="信号时间：">
                          {{ currentWorkStepShow.signalTime }}
                        </el-descriptions-item>
                        <el-descriptions-item label="站点号：">
                          {{ currentWorkStepShow.id }}
                        </el-descriptions-item>
                        <el-descriptions-item label="站点信息：">
                          <el-tag size="small">{{ currentWorkStepShow.message }}</el-tag>
                        </el-descriptions-item>
                      </el-descriptions>
                    </div>
                    <div style="align-items: center;">
                      <span style="color: red;font-size: 36px;margin-top: 15px">{{ currentWorkStepShow.message }}</span>
                    </div>
                  </div>
                </div>
                <div style="flex: 1;height: 73vh;overflow-x: auto;border: 1px solid #d3d3d3; /* 修改为浅灰色 */">
                  <div style="width: 100%;height: 63vh;text-align: left;margin-top: 8px;">
                    <el-link
                        style="margin-left: 10px"
                        :style="{ backgroundColor:videoAndImage1 , color:videoAndImageColor1 , padding: '4px 10px', borderRadius: '5px' }"
                        @click="videoAndImage(1)">{{ main.picture }}
                    </el-link>
                    <span style="margin-left: 8px;margin-right: 8px">|</span>
                    <el-link
                        :style="{ backgroundColor:videoAndImage2 , color:videoAndImageColor2 , padding: '4px 10px', borderRadius: '5px' }"
                        @click="videoAndImage(2)">{{ main.video }}
                    </el-link>
                    <span style="margin-left: 8px;margin-right: 8px">|</span>
                    <el-link
                        :style="{ backgroundColor:videoAndImage3 , color:videoAndImageColor3 , padding: '4px 10px', borderRadius: '5px' }"
                        @click="videoAndImage(3)">{{ main.onSiteVideo }}
                    </el-link>
                    <hr>
                    <div class="block">
                      <el-carousel trigger="click" height="62vh" v-if="editVideoAndImageUse===1">
                        <el-carousel-item v-for="(item, index) in itemView" :key="index">
                          <el-image
                              style="width: 100%; height: 100%"
                              :src="item"
                              fit='contain'
                              @click="handleImageClick(item)">
                          </el-image>
                        </el-carousel-item>
                      </el-carousel>
                      <el-carousel trigger="click" height="62vh" :autoplay="false"
                                   v-else-if="editVideoAndImageUse===2">
                        <el-carousel-item v-for="(item, index) in itemViewVideo" :key="index">
                          <video
                              style="width: 100%; height: 100%"
                              :src="item"
                              controls></video>
                        </el-carousel-item>
                      </el-carousel>
                      <div v-else-if="editVideoAndImageUse===3">
                        <img :src="'http://127.0.0.1:5000/video_feed'" alt="Video Stream"/>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-main>
          <el-footer>
            <el-button plain size="small" @click="chooseLanguage('chinese')">中 文</el-button>
            <el-button plain size="small" @click="chooseLanguage('russian')">Русский язык</el-button>
            <el-button plain size="small" @click="chooseLanguage('english')">English</el-button>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>

    <!--弹窗放置区-->
    <!--点击上传照片中的放大按钮，查看照片-->
    <el-dialog :visible.sync="dialogPictureAnnex">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <!--当过程步骤不对时弹框跳出提醒-郭-->
    <el-dialog
        :title="''"
        :visible.sync="workStepDetectionShowDialog"
        width="1200px">
       <span style="color: red; font-weight: bold; font-size: 38px;">
        采集到作业工步异常，请确认作业过程是否符合标准作业要求
       </span>

    </el-dialog>
    <!--抽屉放置区域-->
    <el-drawer
        :title="drawerTitle"
        :visible.sync="drawer"
        direction="rtl"
        size="50%">
      <el-table
          :data="tableData"
          style="width: 100%;margin-left: 25px;margin-right: 25px"
          highlight-current-row="highlight-current-row">
        <el-table-column
            prop="workshop"
            :label="main.workshop"
            sortable
            width="180"
            v-slot:default="scope">
          <div style="width: 100%" @click="tableDataClick(1,scope)">
            <span v-if="languageS==='chinese'">{{ scope.row.workshop.split('/')[0] }}</span>
            <span v-else-if="languageS==='english'">{{ scope.row.workshop.split('/')[1] }}</span>
            <span v-else-if="languageS==='russian'">{{ scope.row.workshop.split('/')[2] }}</span>
          </div>
        </el-table-column>
        <el-table-column
            prop="lineName"
            :label="main.lineName"
            sortable
            width="180"
            v-slot:default="scope">
          <div style="width: 100%" @click="tableDataClick(1,scope)">
            <span v-if="languageS==='chinese'">{{ scope.row.lineName.split('/')[0] }}</span>
            <span v-else-if="languageS==='english'">{{ scope.row.lineName.split('/')[1] }}</span>
            <span v-else-if="languageS==='russian'">{{ scope.row.lineName.split('/')[2] }}</span>
          </div>
        </el-table-column>
        <el-table-column
            prop="op"
            :label="main.op"
            sortable
            width="80"
            :formatter="formatter"
            v-slot="scope">
          <div style="width: 100%" @click="tableDataClick(1,scope)">
            {{ scope.row.op }}
          </div>
        </el-table-column>
        <el-table-column
            prop="fileName"
            :label="main.fileName"
            v-slot:default="scope">
          <div style="width: 100%" @click="tableDataClick(1,scope)">
            <span
                v-if="languageS==='chinese' && scope.row.fileName.split('|*|').length===3">{{ scope.row.fileName.split('|*|')[0] }}</span>
            <span
                v-else-if="languageS==='english' && scope.row.fileName.split('|*|').length===3">{{ scope.row.fileName.split('|*|')[1] }}</span>
            <span
                v-else-if="languageS==='russian' && scope.row.fileName.split('|*|').length===3">{{ scope.row.fileName.split('|*|')[2] }}</span>
            <span v-else>{{ scope.row.fileName }}</span>
          </div>
        </el-table-column>
      </el-table>
    </el-drawer>
  </div>
</template>

<script>

import _ from "lodash";
import {
  filepath,
  machiningAssembly,
  OpAssembly,
  optionWorkshop,
  tree_workshop_product_op_chinese,
  tree_workshop_product_op_english,
  tree_workshop_product_op_russian,
  workshopAssembly
} from "@/configUse";
import * as echarts from "echarts";

export default {
  name: "workGuide",
  data() {
    return {
      //测试连接PLC信号,记录PLC信号
      currentTime: {
        op: '',
        id: '',
        engineNumber: '',
        signal: false,
        signalTime: '',
        message: '',
      },
      error: null,
      ws: null,
      reconnectAttempts: 0,
      //记录现在的所有工序的内容（当前最新每个工序发上来的信号
      currentWorkStep: [
        {
          workshop: '',
          drawing: '',
          id: '',
          engineNumber: '',
          signalTime: '',
          message: '',
        }
      ],
      currentWorkStepShow: {
        workshop: '',
        drawing: '',
        id: '',
        engineNumber: '',
        signalTime: '',
        message: '',
      },

      activeName: 'first',
      //记录控制计划弹窗的树形导航结构
      treeControl: tree_workshop_product_op_chinese,
      //用户权限相关的变量
      useName: '',//用户名称
      useId: '',//用户编号
      usePower: '',//用户权限
      //语言选择的变量
      languageS: 'chinese',
      //切换语言
      main: {
        qualityManagementSystem: '俄动力质量管理系统',
        standardWorkGuidance: '标准作业引导',
        selectionPrompt: '选择提示：',
        titleMianId: '未选择产品',
        titleMianOp: '未选择工序',
        enterKeywordsForFiltering: '输入关键字进行过滤',
        picture: '图片',
        video: '视频',
        onSiteVideo: '现场视频',
        workshop: '车间名称',
        lineName: '线体名称',
        op: '工序',
        fileName: '文件名称'
      },
      pageVal: {
        instruction: '要领书/指导书',
        order: '序号',
        stepContent: '步骤内容',
        attentionPointsExplanation: '注意点说明：',
        qualityInspection: '品质检查：',
        controlPlanRequirements: "控制计划要求：",
        tolerance: '产品/过程规范/公差',
        evaluate: '评价',
        capacity: '容量',
        frequency: '频率',
        controlMethod: '控制方法',
        tools: '工具：',
        equipment: '设备：',
        accessories: '辅料：',

        partDetailsList: '零部件明细',
        add: '新建',
        diagramCode: '图示代码',
        stepNumber: '工步号',
        partName: '零部件名称',
        partNumber: '零部件图号',
        quantity: '数量',
        specialCharacteristics: "特殊特性：",

        failureCase: '失效案例库',

        manHour: '工时',
      },

      homepageName: '俄罗斯动力质量管理系统',//主页变化的语言选择
      //用在显示不同的样式部分
      //左侧的作业指导书按钮的样式
      background1: '',
      background2: '',
      background3: '',
      //新导航用到的变量
      //导航筛选的变量
      filterText: '',
      // 导航的目录
      treeList: tree_workshop_product_op_chinese,
      //树形的导航用到的数据模板
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      //点击的树形结构内容Data
      treeData: null,
      //点击的树形结构内容
      treeNode: null,


      //用作作业指导书表头部分的选择
      workBookHeard1: '#0269fa',
      workBookHeard2: '',
      workBookHeard3: '',
      workBookHeard4: '',
      workBookHeard5: '',
      workBookHeardColour1: 'white',
      workBookHeardColour2: '',
      workBookHeardColour3: '',
      workBookHeardColour4: '',
      workBookHeardColour5: '',

      //图片、视频/现场视频切换的按钮样式变量
      videoAndImage1: '#0269fa',
      videoAndImage2: '',
      videoAndImage3: '',
      //图片、视频切换的按钮颜色变化
      videoAndImageColor1: 'white',
      videoAndImageColor2: '',
      videoAndImageColor3: '',


      //抽屉用到的变量
      //控制抽屉的表头
      drawerTitle: '',
      //控制抽屉打开
      drawer: false,
      //数据大表，记录工序作业指导书的
      tableData: [
        {
          //主键
          id: '',
          //车间名称
          workshop: '',
          //线体名称
          lineName: '',
          //工序名称
          op: '',
          //文件名称
          fileName: '',
          //版本号
          editionNum: '',
          //编制日期
          writeDate: '',
          //执行日期
          executeDate: '',
          //文件编号
          fileNum: '',
          //编制
          writeUse: '',
          //审核
          examineUse: '',
          //批准
          ratifyUse: '',
          //会签
          countersignUse: '',
          //作业指导书
          workBook: '',
          //产品图号
          productId: '',
          //视频附件
          BookVideo: '',
          //设备配合动作分解
          deviceTime: '',
          //修改记录
          editRecord: '',
          //控制计划标记位
          controlSign: '',
          //三不检验指导书标记位
          threeBookSign: '',
          //装配零部件明细
          partsList: '',
          //指导书类型
          bookType: '',
          //删除标记位
          deleteSign: '',
          //创建时间
          establishTime: '',
          //修改时间
          UpdateTime: '',
        }
      ],
      //编辑大表的临时中转变量
      tableDataTemp: {
        //主键
        id: '',
        //车间名称
        workshop: '',
        //线体名称
        lineName: '',
        //工序名称
        op: '',
        //文件名称
        fileName: '',
        //版本号
        editionNum: '',
        //编制日期
        writeDate: '',
        //执行日期
        executeDate: '',
        //文件编号
        fileNum: '',
        //编制
        writeUse: '',
        //审核
        examineUse: '',
        //批准
        ratifyUse: '',
        //会签
        countersignUse: '',
        //作业指导书
        workBook: '',
        //产品图号
        productId: '',
        //视频附件
        bookVideo: '',
        //修改记录
        editRecord: '',
        //控制计划标记位
        controlSign: '',
        //三不检验指导书标记位
        threeBookSign: '',
        //装配零部件明细
        partsList: '',
        //指导书类型
        bookType: '',
        //删除标记位
        deleteSign: '',
        //创建时间
        establishTime: '',
        //修改时间
        UpdateTime: '',
      },
      //表单输入的控件变量
      formTableData: {
        //主键
        id: '',
        //车间名称
        workshop: '',
        //线体名称
        lineName: '',
        //工序名称
        op: '',
        //文件名称
        fileName: '',
        //版本号
        editionNum: '',
        //编制日期
        writeDate: '',
        //执行日期
        executeDate: '',
        //文件编号
        fileNum: '',
        //编制
        writeUse: '',
        //审核
        examineUse: '',
        //批准
        ratifyUse: '',
        //会签
        countersignUse: '',
        //作业指导书
        workBook: '',
        //产品图号
        productId: '',
        //视频附件
        bookVideo: '',
        //修改记录
        editRecord: '',
        //控制计划标记位
        controlSign: '',
        //三不检验指导书标记位
        threeBookSign: '',
        //装配零部件明细
        partsList: '',
        //指导书类型
        bookType: '',
        //删除标记位
        deleteSign: '',
        //创建时间
        establishTime: '',
        //修改时间
        UpdateTime: '',
      },
      //作业指导书的数据表
      workBook: [
        {
          id: 0,
          work: '请编辑',//工作项目
          problem: '请输入',//关注点
          inspect: '请输入',//品质检查
          spendTime: 0,//需要时间
          controlPlan: 0,//控制计划的关联项
          toll: '',//工具
          device: '',//设备
          accessories: '',//辅料,
          pictureList: '',//图片列表
          videoList: '',//视频列表

          //2025年新增加的内容，是作为标准作业引导来的
          startSignal: '',//开始信号的标记
          endSignal: '',//结束信号的标记

          percentage: '',//进度条的百分比
          status: '',//进度条的颜色


        }
      ],
      //记录部件明细
      partsListData: [
        {
          // 图示代码
          mapId: '',
          // 工步号
          stepNum: '',
          // 零部件编号
          partId: '',
          // 零部件名称
          partName: '',
          // 数量
          partNum: '',
          // 特殊特性
          special: '',
          // 最后编辑时间
          endDate: '',
          //最后编辑人
          endName: '',
          // 图片列表
          imageList: '',
          // 预留
          reserve1: '',
          // 预留
          reserve2: '',
          // 预留
          reserve3: '',
        }
      ],
      //记录部件的临时编辑变量
      partsListFrom: {
        // 图示代码
        mapId: '',
        // 工步号
        stepNum: '',
        // 零部件编号
        partId: '',
        // 零部件名称
        partName: '',
        // 数量
        partNum: '',
        // 特殊特性
        special: '',
        // 最后编辑时间
        endDate: '',
        //最后编辑人
        endName: '',
        // 图片列表
        imageList: '',
        // 预留
        reserve1: '',
        // 预留
        reserve2: '',
        // 预留
        reserve3: '',
      },
      //记录部件的点击状态：1.新增；2编辑；3.向下插入；4：删除
      partsListDoe: 0,
      //记录部件的点击行内容，Scope格式
      partsListScope: null,

      //失效案例数据列表
      caseUseData: [{
        id: '1',//主键
        caseUse: '王小虎',//失效案例描述
        pictureList:'',//图片列表
        videoList:'',//视频列表
        editName:'',
        editDate:'',
        reserve1:'',
        reserve2:'',
        reserve3:''
      }],

      //作业指导书控制计划部分的数据集合
      controlPlanData: [
        {
          //主键
          id: -1,
          //产品/过程规范/公差
          specification: '',
          //评价
          measure: '',
          //容量
          capacity: '',
          //频率
          frequency: '',
          //控制方法
          method: '',
        },
      ],
      //控制计划的列表展示
      tableDataControl: [
        {
          //记录主键ID
          id: null,
          //零件/过程编号
          processNumber: '',
          processNumberEnglish: '',
          processNumberRussian: '',
          //机器、夹具、装置、工装
          device: '',
          deviceEnglish: '',
          deviceRussian: '',
          //过程名称/操作描述
          operation: '',
          operationEnglish: '',
          operationRussian: '',
          //编号
          numberOrder: '',
          //产品
          product: '',
          productEnglish: '',
          productRussian: '',
          //过程
          processUse: '',
          processUseEnglish: '',
          processUseRussian: '',
          //特殊特性分类
          characteristic: '',
          //产品、过程规范、公差
          specification: '',
          specificationEnglish: '',
          specificationRussian: '',
          //评价、测量技术
          measure: '',
          measureEnglish: '',
          measureRussian: '',
          //容量
          capacity: '',
          capacityEnglish: '',
          capacityRussian: '',
          //频率
          frequency: '',
          frequencyEnglish: '',
          frequencyRussian: '',
          //控制方法
          method: '',
          methodEnglish: '',
          methodRussian: '',
          //责任部门
          department: '',
          departmentEnglish: '',
          departmentRussian: '',
          //反应计划
          reaction: 0,
          //产品图号
          drawing: '',
          //工序号
          op: 0,
          //车间名称
          workshop: '',
          workshopEnglish: '',
          workshopRussian: '',
          //记录顺序用
          orderNumber: 0,
          //记录删除标记
          deleteSign: 1,
        }
      ],
      //固定选择器用到的变量
      //车间名称
      optionWorkshop: optionWorkshop,
      //线体名称
      optionLine: workshopAssembly,
      //工序名称
      optionOp: OpAssembly,
      //版本号
      optionEditionNum: [{
        value: 1,
        label: '最新'
      },],
      //线体名称选择器的控制是否可以用
      disabledLineName: true,
      //工序的选择器，控制是否可用
      disabledOp: false,
      //弹窗用到的变量
      titleUse: '提示',
      //控制编辑作业指导书的步骤的弹窗
      dialogVisibleText: false,
      //控制表头的变量编辑的弹窗
      dialogTableHeader: false,
      //上传图片的弹窗打开后，点击放大管控弹窗提示
      dialogPictureAnnex: false,
      //上传照片的弹窗
      dialogPicture: false,
      //上传视频的弹窗
      dialogVideo: false,
      //打开控制计划的编辑器
      dialogVisibleControl: false,
      //控制打开零部件编辑弹窗
      partsListDialog: false,
      //控制零部件明细中的图片弹窗
      dialogPicturePart: false,

      //图片相关的数据，录像相关的项目
      itemView: [],//展示图片了路径,用在了走马灯部位
      itemViewVideo: [],//展示了录像的路径，用在录像的走马灯上
      editPictureType: 0,//修改图片的类型，主要记录了
      PictureList: [],//图片文件的
      videoList: [],//录像的文件列表
      disabled: false,//图片显示的控制变量
      dialogImageUrl: '',//弹窗显示的图片路径
      videoUrl: '',//视频的地址
      fileType: '',//限定上传文件的类型

      //弹窗用到的输入变量
      inputText1: '',//记录作业步骤
      inputText2: '',//记录注意点
      inputText3: '',//品质检查
      inputText4: '',//设备名称
      inputText5: '',//辅料名称
      inputText6: '',//工具名称
      inputNum: 0,//用户输入的时间

      //用户现在的类型是什么
      typeTableUse: 0,//选择的哪一类作业指导书
      tableDataScope: null,//选择的总表内容传递
      editBookUse: 0,//用户选择对作业要领书编辑的内容
      editBookScope: null,//用户现在的作业指导书内容传递
      editTableUse: 0,//记录编辑表头的类型，1：插入，2.编辑，3.删除
      editVideoAndImageUse: 1,//记录用户选择的是看图片，还是看视频。1:看图片；2:看视频；
      workBookHeardUse: 1,//记录用户选择的看作业指导书上的那个类型，1代表是作业指导书；2.

      //选择控制计划条目是那个,记录的是选择的本行所有内容。
      controlPlanSelection: [],
      //选择的控制计划的ID是什么，是一个数据合集。
      controlPlanSelectionId: '',

      //等查询完毕控制计划关联项后，开始显示元素
      isControlPlanLoad: false,

      //忙加载
      loading: false,

      // 流对象，用于存储从摄像头获取的视频流
      stream: null,
      //现场视频地址
      videoSrc: 'http://127.0.0.1:5000/video_feed', // 替换为你的实际视频流 URL
      //存放了一个计时器
      intervalId: null,
      //工步检测用的弹窗变量，用于显示工步错误的时候，弹窗提醒 -郭
      workStepDetectionShowDialog: false,
      //后端websocket发送信息中存储发动机图号的中间变量，用于对比选择的发动机图号和后端发送来的图号是否匹配 -郭
      websocketEngineDrawingVariable:{
        'OP10':'',//当前传递上来的发动机号
      },
      //后端websocket发送信息中存储工位号的中间变量，用于对比工位号是否匹配 -郭
      websocketOPIdVariable:'',

      //画工时的直方图
      //画直方图
      chartUserBor:null,
      optionBor: {
        title: {
          text: '无信息',        // 主标题文本
          subtext:'',              //副标题
          left: 'center',         // 标题位置（left/center/right/数值）
          top: 'top',             // 标题垂直位置（top/center/bottom/数值）
          textStyle: {
            color: '#333',        // 标题颜色
            fontSize: 18,         // 标题字号
            fontWeight: 'bold'    // 字体粗细
          },
          subtextStyle: {
            color: '#aaa'         // 副标题样式
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top:'3%',
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data:[]
          }
        ]
      },
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    // 对 currentWorkStep 数组对象进行深度监视
    currentWorkStep: {
      handler(newVal, oldVal) {
        if (this.treeData!=='' && this.treeData!==null && this.treeData!==undefined){
          // 现场生产的产品和用户选择的是否一致
          if (this.treeNode.parent.label===newVal[this.treeData.label].drawing){
            //确定用户选择了某一个工序后开始判断
            if (this.workBook!=='' && this.workBook!==null && this.workBook!==undefined && this.workBook.length>0 ){
              if (newVal[this.treeData.label].id==='01'){
                //第一步：把所有的步骤清空，恢复到一台发动机的初始状态
                for (let i = 0; i < this.workBook.length; i++) {
                  this.workBook[i].percentage=0
                }
                //第二步：从起始步骤开始进行滚动
                //建立一个记录现在第几步的变量
                let step =0
                //记录现在运行到了第几秒
                let secondNum=0
                let timer = setInterval(() => {
                  if (step>this.workBook.length){
                    //已经大于了本工序步骤了，需要结束滚动，结束这个时间器
                    clearInterval(timer); // 清除定时器
                    return
                  }
                  //开始滚动滚动条
                  this.workBook[step].percentage=secondNum/Number(this.workBook[step].spendTime)
                  this.workBook[step].status='success'
                  //判断，如果时间已经到了，就循环下一条,这个是需要这一个步骤没有信号的状态下，就是标记为’no'
                  if (this.workBook[step].endSignal==='no' && secondNum>=Number(this.workBook[step].spendTime)){
                    step=step+1
                    secondNum=0
                  }
                  //
                }, 1000);
              }
            }

            console.log(newVal[this.treeData.label],oldVal)
          }
          else {
            // 通过 Vue.set 来修改嵌套的属性
            this.$message.error("现在生产的产品型号和您选择的不符,现在生产的是："+newVal[this.treeData.label].drawing)
          }
        }

      },
      deep: true  // 启用深度监视
    }
  },
  methods: {
    //测试连接PLC
    initWebSocket() {
      // 先关闭已有连接（防止重复连接）
      if (this.ws) {
        this.ws.close();
      }

      // 创建新连接
      this.ws = new WebSocket("ws://10.168.152.150:8766");  //150--- 8766

      // 连接成功时
      this.ws.onopen = () => {
        this.error = null;
        this.reconnectAttempts = 0; // 重置重连计数器
        console.log("WebSocket 已连接");
      };

      // 接收消息时
      this.ws.onmessage = (event) => {
        // 确保接收的是字符串格式的时间数据
        if (typeof event.data === "string") {
          let eventJson = JSON.parse(event.data)
         this.currentWorkStep=eventJson
        }
      }

      // 发生错误时
      this.ws.onerror = (error) => {
        this.error = "连接错误，请检查服务是否运行";
        console.error("WebSocket 错误:", error);
      };

      // 连接关闭时（尝试重连）
      this.ws.onclose = () => {
        console.log("连接关闭，尝试重连...");
        if (this.reconnectAttempts < 5) {
          setTimeout(() => {
            this.reconnectAttempts++;
            this.initWebSocket(); // 递归重连
          }, Math.min(1000 * this.reconnectAttempts, 5000));
        }
      };
    },

    //控制进度条，计算显示出来，没有用
    controlProgressBar() {
      //给当前的显示工步位置赋值,同时更新进度条
      if (this.treeNode !== '' && this.treeNode !== undefined && this.treeNode !== null) {
        if (this.treeNode.label === this.currentTime.op) {
          this.currentWorkStepShow.id = this.currentTime.id
          this.currentWorkStepShow.message = this.currentTime.message
          this.currentWorkStepShow.signalTime = this.currentTime.signalTime
          this.currentWorkStepShow.engineNumber = this.currentTime.engineNumber
          //控制进度条,当起始条到了以后，所有的清零。
          if (String(this.currentTime.id) === '01') {
            //所有的进度复位
            for (let i = 0; i < this.workBook.length; i++) {
              this.workBook[i].percentage = 0
              this.workBook[i].status = 'success'
            }
          }
          let currentIndex = 0;
          const runNextProgressBar = () => {
            if (currentIndex >= this.workBook.length) {
              console.log('所有进度条已完成');
              return;
            }
            const item = this.workBook[currentIndex];
            let time = 0;
            const intervalId = setInterval(() => {
              time += 0.5; // 每次增加 0.5 秒
              item.percentage = Math.round((time / item.spendTime) * 100) // 计算百分比

              if (item.percentage >= 100) {
                clearInterval(intervalId);
                console.log(`进度条 ${currentIndex} 完成`);
                currentIndex++;
                runNextProgressBar(); // 递归调用下一个
              }
            }, 500);
          };

          runNextProgressBar(); // 启动第一个
        }
      }
    },

    //关闭PLC连接
    closeConnection() {
      if (this.ws) {
        this.ws.close();
      }
    },

    //通用，树形导航筛选
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    //单击树形导航结构的反应
    treeClick(data, node) {
      // console.log(data, node)
      this.titleMianId = '未选择产品'
      this.titleMianOp = '未选择工序'
      if (node.level >= 3) {
        this.treeData = data
        this.treeNode = node
        let firstFiledVal = ''
        if (this.treeNode.parent.parent.label === '装配车间' ||
            this.treeNode.parent.parent.label === 'Assembly workshop' ||
            this.treeNode.parent.parent.label === 'Сборочная линия') {
          firstFiledVal = '装配车间/Assembly workshop/Сборочная линия'
        }
        const secondFiledVal = node.parent.label
        const thirdFiledVal = node.data.label

        //向后端查询数据
        this.inquiryType('workshop', 'productId', 'op', firstFiledVal, secondFiledVal, thirdFiledVal)
        this.tableDataScope = null
        this.tableDataTemp = {
          //主键
          id: '',
          //车间名称
          workshop: '',
          //线体名称
          lineName: '',
          //工序名称
          op: '',
          //文件名称
          fileName: '',
          //版本号
          editionNum: '',
          //编制日期
          writeDate: '',
          //执行日期
          executeDate: '',
          //文件编号
          fileNum: '',
          //编制
          writeUse: '',
          //审核
          examineUse: '',
          //批准
          ratifyUse: '',
          //会签
          countersignUse: '',
          //作业指导书
          workBook: '',
          //产品图号
          productId: '',
          //视频附件
          bookVideo: '',
          //修改记录
          editRecord: '',
          //控制计划标记位
          controlSign: '',
          //三不检验指导书标记位
          threeBookSign: '',
          //装配零部件明细
          partsList: '',
          //指导书类型
          bookType: '',
          //删除标记位
          deleteSign: '',
          //创建时间
          establishTime: '',
          //修改时间
          UpdateTime: '',
        }
        //打开弹窗
        this.drawer = true
      }
    },
    //通用，语言选择
    chooseLanguage(language) {
      this.languageS = language
      if (this.languageS === 'chinese') {
        this.treeControl = tree_workshop_product_op_chinese
        this.treeList = tree_workshop_product_op_chinese
        //main
        this.main.qualityManagementSystem = '俄动力质量管理系统'
        this.main.standardWorkGuidance = '标准作业引导'

        this.main.selectionPrompt = '选择提示：'
        this.main.titleMianId = '未选择产品'
        this.main.titleMianOp = '未选择工序'
        this.main.enterKeywordsForFiltering = '输入关键字进行过滤'
        this.main.picture = '图片'
        this.main.video = '视频'
        this.main.onSiteVideo = '现场视频'
        //抽屉
        this.main.workshop = '车间名称'
        this.main.lineName = '线体名称'
        this.main.op = '工序'
        this.main.fileName = '文件名称'
        //pageVal
        this.pageVal.instruction = '要领书/指导书'
        this.pageVal.order = '序号'
        this.pageVal.stepContent = '步骤内容'
        this.pageVal.attentionPointsExplanation = '注意点说明：'
        this.pageVal.qualityInspection = '品质检查：'
        this.pageVal.controlPlanRequirements = '控制计划要求：'
        this.pageVal.tolerance = '产品/过程规范/公差'
        this.pageVal.evaluate = '评价'
        this.pageVal.capacity = '容量'
        this.pageVal.frequency = '频率'
        this.pageVal.controlMethod = '控制方法'
        this.pageVal.tools = '工具：'
        this.pageVal.equipment = '设备：'
        this.pageVal.accessories = '辅料：'

        this.pageVal.partDetailsList = '零部件明细'
        this.pageVal.add = '新建'
        this.pageVal.diagramCode = '图示代码'
        this.pageVal.stepNumber = '工步号'
        this.pageVal.partName = '零部件名称'
        this.pageVal.partNumber = '零部件编号'
        this.pageVal.quantity = '数量'
        this.pageVal.specialCharacteristics = '特殊特性：'

        this.pageVal.failureCase = '失效案例库'

        this.pageVal.manHour = '工时'
      } else if (this.languageS === 'english') {
        this.treeControl = tree_workshop_product_op_english
        this.treeList = tree_workshop_product_op_english
        //main
        this.main.qualityManagementSystem = 'Quality Management System'
        this.main.standardWorkGuidance = 'Standard Work Guidance'

        this.main.selectionPrompt = 'Selection Prompt:'
        this.main.titleMianId = 'No Product Selected'
        this.main.titleMianOp = 'No Process Selected'
        this.main.enterKeywordsForFiltering = 'Enter Keywords for Filtering'
        this.main.picture = 'Picture'
        this.main.video = 'Video'
        this.main.onSiteVideo = 'On-site Video'
        //抽屉
        this.main.workshop = 'Workshop'
        this.main.lineName = 'Line'
        this.main.op = 'OP'
        this.main.fileName = 'File Name'
        //pageVal
        this.pageVal.instruction = 'Instruction'
        this.pageVal.order = 'Order'
        this.pageVal.stepContent = 'Step Content'
        this.pageVal.attentionPointsExplanation = 'Attention Points Explanation:'
        this.pageVal.qualityInspection = 'Quality Inspection:'
        this.pageVal.controlPlanRequirements = 'Control Plan Requirements:'
        this.pageVal.tolerance = 'Product/Process Specification/Tolerance'
        this.pageVal.evaluate = 'Evaluate'
        this.pageVal.capacity = 'Capacity'
        this.pageVal.frequency = 'Frequency'
        this.pageVal.controlMethod = 'Control Method'
        this.pageVal.tools = 'Tools:'
        this.pageVal.equipment = 'Equipment:'
        this.pageVal.accessories = 'Accessories:'

        this.pageVal.partDetailsList = 'Part Details List'
        this.pageVal.add = 'Add'
        this.pageVal.diagramCode = 'Diagram Code'
        this.pageVal.stepNumber = 'Step Number'
        this.pageVal.partName = 'Part Name'
        this.pageVal.partNumber = 'Part Number'
        this.pageVal.quantity = 'Quantity'
        this.pageVal.specialCharacteristics = 'Special Characteristics:'

        this.pageVal.failureCase = 'Failure Case'

        this.pageVal.manHour = 'Man-hour'
      } else if (this.languageS === 'russian') {
        this.treeControl = tree_workshop_product_op_russian
        this.treeList = tree_workshop_product_op_russian
        //main
        this.main.qualityManagementSystem = 'Система управления качеством'
        this.main.standardWorkGuidance = 'Стандартная операционная наведения'

        this.main.selectionPrompt = 'Выборная строка:'
        this.main.titleMianId = 'Нет выбранного продукта'
        this.main.titleMianOp = 'Не выбран процесс'
        this.main.enterKeywordsForFiltering = 'Введите ключевые слова для фильтрации'
        this.main.picture = 'Изображение'
        this.main.video = 'Видео'
        this.main.onSiteVideo = 'Видео на месте'
        //抽屉
        this.main.workshop = 'Цех'
        this.main.lineName = 'Линия'
        this.main.op = 'Операция'
        this.main.fileName = 'Имя файла'
        //pageVal
        this.pageVal.instruction = 'Инструкция'
        this.pageVal.order = 'Заказ'
        this.pageVal.stepContent = 'Содержание шага'
        this.pageVal.attentionPointsExplanation = 'Объяснение пунктов внимания:'
        this.pageVal.qualityInspection = 'Инспекция качества:'
        this.pageVal.controlPlanRequirements = 'Требования плана управления:'
        this.pageVal.tolerance = 'Cпецификация продукта/процесса/толерантность'
        this.pageVal.evaluate = 'Oценить'
        this.pageVal.capacity = 'Mощность'
        this.pageVal.frequency = 'Частота'
        this.pageVal.controlMethod = 'Метод контроля'
        this.pageVal.tools = 'Инструменты:'
        this.pageVal.equipment = 'Оборудование:'
        this.pageVal.accessories = 'Аксессуары:'

        this.pageVal.partDetailsList = 'Список части'
        this.pageVal.add = 'Добавить'
        this.pageVal.diagramCode = 'Код диаграммы'
        this.pageVal.stepNumber = 'Номер шага'
        this.pageVal.partName = 'Название части'
        this.pageVal.partNumber = 'Номер детали'
        this.pageVal.quantity = 'Количество'
        this.pageVal.specialCharacteristics = 'Особые характеристики'

        this.pageVal.failureCase = 'Случай неудачи'

        this.pageVal.manHour = 'Рабочее время'
      }
    },
    //通用：误关闭弹窗的确认函数(中英俄)
    getI18nText(key) {
      const i18nMessages = {
        chinese: {
          confirmClose: '确认关闭？',
          confirmButton: '确定',
          cancelButton: '取消',
        },
        english: {
          confirmClose: 'Sure to close?',
          confirmButton: 'OK',
          cancelButton: 'Cancel',
        },
        russian: {
          confirmClose: 'Уверен в закрытии?',
          confirmButton: 'Подтвердить',
          cancelButton: 'Отмена',
        },
      };
      return i18nMessages[this.languageS]?.[key] ?? i18nMessages.chinese[key];
    },
    handleClose(done) {
      this.$confirm(
          this.getI18nText('confirmClose'), // 消息内容
          {
            confirmButtonText: this.getI18nText('confirmButton'), // 确认按钮
            cancelButtonText: this.getI18nText('cancelButton'),    // 取消按钮
          }
      )
          .then(() => done())
          .catch(() => {
          });
    },
    //查询用户信息的函数
    inquiry() {
      //输入用户编号，向后端查询信息
      const useId = localStorage.getItem('userName').replace(/"/g, '');
      this.$request.post('/useQueryPower', {
        queryFiledName: 'operateGuideBook',
        userId: useId,
      }).then(result => {
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        } else {
          this.useName = result.data.name
          this.usePower = result.data.operateGuideBook
          this.useId = useId
        }
      })
    },
    //辅助函数，依据用户现点击的是那个产品，那一序，那个车间，然后赛选出作业指导书，是用三个变量筛选产品的
    // val是一个joson格式的数据{firstFiledName：firstFiledName,
    inquiryType(firstFiledName, secondFiledName, thirdFiledName, firstFiledVal, secondFiledVal, thirdFiledVal) {
      //向后端发送请求，把查询出来的作业指导书类别赋值给大表。
      this.$request.post('/inquiryOperateGuideBook', {
        firstFiledName: firstFiledName,
        secondFiledName: secondFiledName,
        thirdFiledName: thirdFiledName,
        firstFiledVal: firstFiledVal,
        secondFiledVal: secondFiledVal,
        thirdFiledVal: thirdFiledVal
      }).then(result => {
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        } else {
          this.tableData = result.data
        }
      })
    },
    //选择器的变化引起的函数
    selectChange(val, doe) {
      if (val === '机加车间/Machining workshop/Машиностроительный цех') {
        this.optionLine = machiningAssembly
        this.disabledLineName = false
      } else if (val === '装配车间/Assembly workshop/Сборочная линия') {
        this.optionLine = workshopAssembly
        this.disabledLineName = false
        console.log(doe)
      }
    },
    //生成唯一标识码的函数（利用时间戳和随机数
    generateUniqueId() {
      return Date.now().toString() + Math.random().toString(36).slice(2, 11);
    },
    //主表的默认排序
    formatter(row, column) {
      console.log(column)
      return row.address;
    },
    //单击主表某一个数据表的时候，做出的反应（现在函数用在了主表上）
    tableDataClick(doe, scope) {
      if (doe === 1) {
        this.titleMianId = this.treeNode.parent.label
        this.titleMianOp = this.treeNode.data.label
        //现在是主表上的点击
        //把点击击的单元格范围数据发送出去
        this.tableDataScope = scope
        //把数据赋值给临时的数据
        this.tableDataTemp = _.cloneDeep(scope.row)
        //组合作业指导书的内容
        //把数据进行分割,分割出步骤一条一条的。
        const temp = this.tableDataTemp.workBook.split('|-|')
        // 对每一条的数据进行处理
        //对作业指导书进行组合
        this.workBook = []
        for (let i = 0; i < temp.length - 1; i++) {
          //对数据进行分割
          const time = temp[i].split('|%|')
          // 组合数据
          const timeTemp = {
            id: 0,
            work: time[0],//工作项目
            problem: time[1],//关注点
            inspect: time[2],//品质检查
            spendTime: time[3],//需要的时间
            controlPlan: time[4],//控制计划的关联项
            toll: time[5],//工具
            device: time[7],//设备
            accessories: time[6],//辅料,
            pictureList: time[8],//图片地址列表
            videoList: time[9],//视频地址列表
            startSignal: time[10],//起始信号
            endSignal: time[11],//结束信号

            percentage: 0,
            status: 'success',
          }
          this.workBook.push(timeTemp)

          //恢复默认的作业指导书
          this.workBookHeard1 = '#0269fa'
          this.workBookHeardColour1 = 'white'

          this.workBookHeard2 = ''
          this.workBookHeardColour2 = ''

          this.workBookHeard3 = ''
          this.workBookHeardColour3 = ''

          this.workBookHeard4 = ''
          this.workBookHeardColour4 = ''

          this.workBookHeard5 = ''
          this.workBookHeardColour5 = ''

          this.workBookHeardUse=1
        }

        //对失效案例库列表进行组合
        this.caseUseData=[]
        if (this.tableData[this.tableDataScope.$index].caseUse===''){
          this.caseUseData=[]
        }
        else {
          let caseUseTemp=this.tableData[this.tableDataScope.$index].caseUse.split('|-|')
          if (caseUseTemp.length===0){
            caseUseTemp.push(this.tableData[this.tableDataScope.$index].caseUse)
          }
          for (let i = 0; i < caseUseTemp.length; i++) {
            let caseUseItem=caseUseTemp[i].split('|%|')
            let temp={
              id: i,
              caseUse: caseUseItem[0],
              editName: caseUseItem[1],
              editDate: caseUseItem[2],
              pictureList: caseUseItem[3],
              videoList: caseUseItem[4],
              reserve1: caseUseItem[5],
              reserve2: caseUseItem[6],
              reserve3: caseUseItem[7]
            }
            this.caseUseData.push(temp)
          }
        }

        //对零部件列表进行组合
        //新组合零部件明细
        this.partsListData = []
        let partsTemp = this.tableData[this.tableDataScope.$index].partsList.split('|-|')
        for (let i = 0; i < partsTemp.length - 1; i++) {
          let partsItem = partsTemp[i].split('|%|')
          let temp = {
            // 图示代码
            mapId: partsItem[0],
            // 工步号
            stepNum: partsItem[1],
            // 零部件编号
            partId: partsItem[2],
            // 零部件名称
            partName: partsItem[3],
            // 数量
            partNum: partsItem[4],
            // 特殊特性
            special: partsItem[5],
            // 最后编辑时间
            endDate: partsItem[6],
            // 最后编辑人
            endName: partsItem[7],
            // 图片列表
            imageList: partsItem[8],
            // 预留
            reserve1: partsItem[9],
            // 预留
            reserve2: partsItem[10],
            // 预留
            reserve3: partsItem[11],
          }
          this.partsListData.push(temp)
        }

        //提示用户，现在的信号是不是选择的机型
        let tempStep=_.cloneDeep(this.currentWorkStep[this.treeData.label])
       if (tempStep ==='' || tempStep===undefined || tempStep===null){
         this.$message.success("无对应的PLC信号，请等待")
        }
       else if(tempStep.drawing === this.treeNode.parent.label){
         this.$message.success("信号传递正确")
       }
       else {
         this.$message.error("生产的机型与选择的机型不对应,现在生产的是："+tempStep.drawing)
       }

        //关闭抽屉
        this.drawer = false
      }
    },
    //点击查看照片的函数
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogPictureAnnex = true;
    },
    //单击走马灯上的照片，图片放大方法
    handleImageClick(item) {
      this.dialogImageUrl = item
      this.dialogPictureAnnex = true
    },
    // 辅助函数：将Base64编码的字符串转换为Blob对象
    dataURItoBlob(dataURI) {
      // 分离出头部信息,得到数据部分
      let byteString;
      if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
      else
        byteString = unescape(dataURI.split(',')[1]);

      // 写入数组缓冲区
      let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
      let ia = new Uint8Array(byteString.length);
      for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      return new Blob([ia], {type: mimeString});
    },
    // 辅助函数：触发Blob对象的下载
    downloadBlob(blob, fileName) {
      let link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = fileName;
      link.click();
      window.URL.revokeObjectURL(link.href);
    },
    //用户点击的是看图片还是看视频，进行元素的切换
    videoAndImage(doe) {
      if (doe === 1) {
        // 用户要看图像
        this.editVideoAndImageUse = 1;
        this.videoAndImage1 = '#0269fa'
        this.videoAndImageColor1 = 'white'

        this.videoAndImage2 = 'white'
        this.videoAndImageColor2 = ''
        this.videoAndImage3 = 'white'
        this.videoAndImageColor3 = ''
      } else if (doe === 2) {
        // 用户要看视频
        this.editVideoAndImageUse = 2;
        this.videoAndImage2 = '#0269fa'
        this.videoAndImageColor2 = 'white'

        this.videoAndImage1 = 'white'
        this.videoAndImageColor1 = ''
        this.videoAndImage3 = 'white'
        this.videoAndImageColor3 = ''
      } else if (doe === 3) {
        // 用户要看现场视频
        this.editVideoAndImageUse = 3;
        this.videoAndImage3 = '#0269fa'
        this.videoAndImageColor3 = 'white'

        this.videoAndImage1 = 'white'
        this.videoAndImageColor1 = ''
        this.videoAndImage2 = 'white'
        this.videoAndImageColor2 = ''
      }
    },
    //用户点击的是看作业指导书中的哪个数据，表头的上面的列表切换。
    workBookHeard(doe) {
      this.workBookHeardUse = doe
      //图片、视频展示清空
      this.itemView = []
      this.itemViewVideo = []
      if (doe === 1) {
        this.workBookHeard1 = '#0269fa'
        this.workBookHeardColour1 = 'white'

        this.workBookHeard2 = ''
        this.workBookHeardColour2 = ''

        this.workBookHeard3 = ''
        this.workBookHeardColour3 = ''

        this.workBookHeard4 = ''
        this.workBookHeardColour4 = ''

        this.workBookHeard5 = ''
        this.workBookHeardColour5 = ''
      }
      else if (doe === 2) {
        this.workBookHeard1 = ''
        this.workBookHeardColour1 = ''

        this.workBookHeard2 = '#0269fa'
        this.workBookHeardColour2 = 'white'

        this.workBookHeard3 = ''
        this.workBookHeardColour3 = ''

        this.workBookHeard4 = ''
        this.workBookHeardColour4 = ''

        this.workBookHeard5 = ''
        this.workBookHeardColour5 = ''
      }
      else if (doe === 3) {
        this.workBookHeard1 = ''
        this.workBookHeardColour1 = ''

        this.workBookHeard2 = ''
        this.workBookHeardColour2 = ''

        this.workBookHeard3 = '#0269fa'
        this.workBookHeardColour3 = 'white'

        this.workBookHeard4 = ''
        this.workBookHeardColour4 = ''

        this.workBookHeard5 = ''
        this.workBookHeardColour5 = ''
      }
      else if (doe === 4) {
        this.workBookHeard1 = ''
        this.workBookHeardColour1 = ''

        this.workBookHeard2 = ''
        this.workBookHeardColour2 = ''

        this.workBookHeard3 = ''
        this.workBookHeardColour3 = ''

        this.workBookHeard4 = '#0269fa'
        this.workBookHeardColour4 = 'white'

        this.workBookHeard5 = ''
        this.workBookHeardColour5 = ''

        this.$nextTick(() => {
          if (!this.chartUserBor) {
            this.initChart();
          } else if (doe !== 2 && this.chartUserBor) {
            this.chartUserBor.dispose();
            this.chartUserBor = null;
          }
        });
      }
      else if (doe === 5) {
        this.workBookHeard1 = ''
        this.workBookHeardColour1 = ''

        this.workBookHeard2 = ''
        this.workBookHeardColour2 = ''

        this.workBookHeard3 = ''
        this.workBookHeardColour3 = ''

        this.workBookHeard4 = ''
        this.workBookHeardColour4 = ''

        this.workBookHeard5 = '#0269fa'
        this.workBookHeardColour5 = 'white'
      }
    },
    //对作业指导书行单击的时候展开栏的时候触发的函数，调动展开的内容展示,主要是调动控制计划。
    workBookRowClick(row) {
      //去后端查询控制计划关联的内容
      if (row.controlPlan !== '-1') {
        //发送到后端进行查询
        this.$request.post('/inquiryControlPlanAssociationByOperateGuideBook', row.controlPlan)
            .then(result => {
              if (result.code === 401) {
                this.$router.push('UserLogin')
                alert("您未登录，请登录")
              } else {
                this.isControlPlanLoad = false
                this.controlPlanData = result.data
                this.isControlPlanLoad = true
              }
            })
      }

    },
    //单击一行，调出改行的图片、视频数据
    BookRowClick(scope){
      //组合照片、视频文件
      //需要查看作业指导的图片，没有其他的编辑内容,是组合走马灯照片或者视频的
      //组合走马灯的照片
      if (scope.row.pictureList.includes('undefined')){
        this.itemView=[]
      }
      else {
        let pictureTemp=scope.row.pictureList.split('|*|')
        this.itemView=[]
        for (let i = 0; i < pictureTemp.length-1; i++) {
          let temp=filepath+pictureTemp[i]
          this.itemView.push(temp)
        }
      }
      //组合走马灯的视频
      if (scope.row.videoList.includes('undefined')){
        this.itemViewVideo=[]
      }
      else {
        let pictureTemp=scope.row.videoList.split('|*|')
        this.itemViewVideo=[]
        for (let i = 0; i < pictureTemp.length-1; i++) {
          let temp=filepath+pictureTemp[i]
          this.itemViewVideo.push(temp)
        }
      }
    },
    //零部件的行上单击
    partsListClick(row) {
      //组合图片数据
      //组合走马灯的照片
      if (row.imageList.includes('undefined')) {
        this.itemView = []
      } else {
        let pictureTemp = row.imageList.split('|*|')
        this.itemView = []
        for (let i = 0; i < pictureTemp.length - 1; i++) {
          let temp = filepath + pictureTemp[i]
          this.itemView.push(temp)
        }
      }
    },
    //辅助函数：画工时的直方图
    initChart() {
      // 组合数据
      let totalTime=0
      for (let i = 0; i < this.workBook.length; i++) {
        this.optionBor.xAxis[0].data[i] = i + 1;
        this.optionBor.series[0].data[i] = this.workBook[i].spendTime;
        totalTime += parseInt(this.workBook[i].spendTime, 10)
      }
      if (this.languageS==='chinese'){
        this.optionBor.title.text='时间分布图'
      }
      else if (this.languageS==='english'){
        this.optionBor.title.text='Time distribution chart'
      }
      else if (this.languageS==='russian'){
        this.optionBor.title.text='График распределения времени'
      }
      this.optionBor.title.subtext='总时长/Total time/Общее время：'+totalTime
      if (this.$refs.myChartBor) {
        // 初始化图表并设置选项
        this.chartUserBor = echarts.init(this.$refs.myChartBor);
        this.chartUserBor.setOption(this.optionBor);
      } else {
        console.error('DOM element not found for chart initialization');
      }
    },
    //提示打开的工步错误的弹窗的函数 -- 郭
    workStepInspectionClick() {
      this.workStepDetectionShowDialog = true
    }
  },
  mounted() {
    //查询用户信息
    this.inquiry()
    this.workBook = []
    this.partsListData = []
    //组合现在的工步信息
    this.currentWorkStep = []
    //连接PLC信号
    this.initWebSocket();
  },
  // 在 Vue 组件中添加
  beforeDestroy() {
    this.closeConnection();
  }
}
</script>

<style scoped>
/* 主体左侧的工作步骤栏用到的数据包围的div的样式*/

.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  border-left-color: white;
  border-top: white;
}

.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  height: 89vh;
}

.el-main {
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-left-color: white;
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.headMain {
  color: #ffffff; /* 设置字体颜色为红色 */
  font-size: 18px;
}

.center-text {
  /* 使用 margin-left 和 margin-right auto 来实现居中效果 */
  margin-left: auto;
  margin-right: auto;
  /* 注意：如果 header 内只有这两个元素，你可能不需要 margin-right: auto */
}

/*自定义样式*/

</style>